//@flow

/**
 * 登陆信息输入框
 */

import React, { Component } from 'react';
import { 
    View,
    TouchableHighlight,
    Text,
    Image,
    TextInput,
    StyleSheet,
    Button,
    TouchableOpacity,
    ViewStyle,
 } from 'react-native';
import { ERROR_COLOR } from '../../util/constant/ui';
import Icon from "react-native-vector-icons/AntDesign";
import { LoginSecretType } from './loginSecretType';
import { LoginInput } from './loginInput';
import { AuthCodeBtn } from './authCodeBtn';
import { PasswordDisplayControl } from './passwordDisplayControl';
import { Navigate } from '../../common/navigate';
import { LoginBtn } from './loginBtn';
import { USER_PROTOCOL_LIST } from './userProtocolList';
import { MoreFunc } from './moreFunc';
import { presentModalHOC } from "../../base/presentModalHOC";
type Props = {
    style  :ViewStyle,
}
type State = {
    secretType : LoginSecretType,//登陆用密码类型
    areaPreCode: number,//地区码：中国 +86
}


export class LoginForm extends Component <Props,State>{

    /**初始化state */
    state : State = {
        secretType : LoginSecretType.NORMAL_PASSWORD,
        areaPreCode:'86'
    }
    /**渲染密码/验证码输入框 */
    renderSecretInput(type:LoginSecretType){
        switch(type){
            case LoginSecretType.NORMAL_PASSWORD:
            return(
                <View>
                    <LoginInput 
                        key="account"
                        ref={ref=>this.account = ref}
                        placeholder="用户名"
                        iconName="user"/>
                    <LoginInput 
                        key="pwd"
                        ref={ref=>this.pwd = ref}
                        iconName="lock"
                        placeholder="密码"
                        inputType="default"
                        display={false}
                        rightItem={<PasswordDisplayControl onChange={(isShow)=>{
                            this.pwd.changeSafety(isShow)
                        }}/>}/>
                </View>
            )
            case LoginSecretType.AUTH_CODE:
            return (
                <View>
                    <LoginInput 
                            key="cell"
                            ref={ref=>this.cell = ref}
                            placeholder="手机号"
                            iconName="user"
                            rightItem={<TouchableOpacity style={{paddingHorizontal:5,flexDirection:'row',alignItems:'center'}}
                                                         onPress={()=>{
                                                             Navigate.navigate('AreaChoise')
                                                         }}><Text>+{this.state.areaPreCode}  </Text><Icon name="down"/></TouchableOpacity>}/>
                    <LoginInput 
                        key="auth_number"
                        ref={ref=>this.auth_number = ref}
                        iconName="check"
                        inputType="numeric"
                        placeholder="验证码"
                        rightItem={<AuthCodeBtn />}/>
                </View>
            )
            default:
                return null
        }
    }
    /**渲染 短信验证码登陆/密码登陆切换按钮 */
    renderChangeSecretTypeBtn(currentType:LoginSecretType){
        let currentTypeIsNormal : boolean = currentType == LoginSecretType.NORMAL_PASSWORD;
        let title : string =  currentTypeIsNormal? '短信验证码登录':'密码登录'
        return (
            <TouchableOpacity 
                style={{
                    alignSelf: 'flex-start',
                    marginTop:5
                }}
                title={title}
                onPress={()=>{
                this.setState({
                    secretType:currentTypeIsNormal ? LoginSecretType.AUTH_CODE:LoginSecretType.NORMAL_PASSWORD
                })
            }}>
                <Text style={{color:'white'}}>{title}</Text>
            </TouchableOpacity>
        )
    }
    /**渲染登陆按钮 */
    renderLoginBtn(username:string,pwd:string){
        return(
            <LoginBtn username={username} password={pwd}/>
        )
    }
    /**获取登陆账号密码 */
    getLoginInfo(secretType:LoginSecretType){
        let obj : {username:string,pwd:string} = {};
        if(this.state.secretType == LoginSecretType.NORMAL_PASSWORD){
            obj.username = this.account ? this.account.getValue() : ''
            obj.pwd      = this.pwd     ? this.pwd.getValue():''
        }else{
            obj.username = this.cell    ? this.cell.getValue() : ''
            obj.pwd      = this.auth_number?this.auth_number.getValue():''
        }
        return obj;
    }
    /**渲染同意协议说明 */
    renderAgreement(){
        return (
            <View style={{marginTop:10}}>
                <Text style={{color:'gray',fontSize:12}}>已阅读并且同意下列协议</Text>
                <View style={{flexDirection:'row',marginTop:5}}>
                {
                    USER_PROTOCOL_LIST.map((item,index,arr)=>{
                        return (
                            <TouchableHighlight
                                key={item+index}
                                underlayColor="rgb(180,180,180)"
                                onPress={()=>{
                                    alert(`用户协议地址:${item.url}`)
                                }}>
                                <Text style={{fontSize:12}}>{item.title+(index < arr.length-1 ? '、':'')}</Text>
                            </TouchableHighlight>
                        )
                    })
                }
                </View>
            </View>
        )
    }
    render(){
        let obj:{username:string,pwd:string} = this.getLoginInfo(this.state.secretType)
        return (
            <View style={[this.props.style,styles.container]}>
                <View>
                {this.renderSecretInput(this.state.secretType)}
                {this.renderChangeSecretTypeBtn(this.state.secretType)}
                {this.renderLoginBtn(obj.username,obj.pwd)}
                {this.renderAgreement()}
                </View>
                <View>
                    <MoreFunc style={{}}/>
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container:{
        justifyContent:'space-between'
    }
})